<template>
  <div>
    <div class="content-m">
      <div style="text-align: center;padding: 20px">
        <h1>校园失物招领搜索</h1>
      </div>
      <el-card>
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="失物信息" name="lost">
            <el-input size="large" prefix-icon="Search" placeholder="输入物品名称、特征或地点..."></el-input>
            <el-form size="large" :model="lostItemQuery" ref="queryFormRef" inline label-position="top">
              <el-form-item label="物品类别">
                <el-select v-model="lostItemQuery.categoryId" style="width: 300px"
                           placeholder="分类">
                  <el-option label="全部" :value="0"></el-option>
                  <el-option v-for="item in lostFoundCategory" :key="item.lostFoundCategoryId" :label="item.name"
                             :value="item.lostFoundCategoryId"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="拾取地点" prop="lostLocation">
                <el-input style="width: 300px" v-model="lostItemQuery.location"
                          placeholder="请输入丢失丢失地点"></el-input>
              </el-form-item>
              <el-form-item label="发布时间">
                <el-date-picker
                    v-model="lostItemQuery.lostTime"
                    style="width: 300px"
                    type="datetime"
                    placeholder="选择丢失时间"
                />
              </el-form-item>
            </el-form>
            <el-button size="large" icon="Search" type="primary" @click="getLostItemPage">搜索</el-button>
          </el-tab-pane>
          <el-tab-pane label="招领信息" name="found">
            <el-input size="large" prefix-icon="Search" placeholder="输入物品名称、特征或地点..."></el-input>
            <el-form size="large" :model="foundItemQuery" ref="queryFormRef" inline label-position="top">
              <el-form-item label="物品类别">
                <el-select v-model="foundItemQuery.categoryId" style="width: 300px"
                           placeholder="分类">
                  <el-option label="全部" :value="0"></el-option>
                  <el-option v-for="item in lostFoundCategory" :key="item.lostFoundCategoryId" :label="item.name"
                             :value="item.lostFoundCategoryId"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="拾取地点" prop="lostLocation">
                <el-input style="width: 300px" v-model="foundItemQuery.location"
                          placeholder="请输入丢失丢失地点"></el-input>
              </el-form-item>
              <el-form-item label="发布时间">
                <el-date-picker
                    v-model="foundItemQuery.foundTime"
                    style="width: 300px"
                    type="datetime"
                    placeholder="选择丢失时间"
                />
              </el-form-item>
            </el-form>
            <el-button size="large" icon="Search" type="primary" @click="getFoundItemPage">搜索</el-button>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <div v-if="activeName==='lost'" style="padding: 20px">
        <span style="font-size: 20px;font-weight: bold">最新失物信息</span>
        <el-tag type="primary">{{ lostItemPage.total }}条结果</el-tag>
        <div class="pad">
          <el-space wrap>
            <lost-found-card v-for="item in lostItemPage.list" :key="item.lostItemId" type="lost"
                             @detail="goLostFoundDetail('lost', item)"  :lostFoundItem="item"></lost-found-card>
          </el-space>
        </div>
        <div>
          <el-pagination
              background
              v-model:current-page="lostItemQuery.pageNum"
              layout="prev, pager, next"
              :total="lostItemPage.total"
              :page-size="10"
          >
          </el-pagination>
        </div>
      </div>
      <div v-else style="padding: 20px">
        <span style="font-size: 20px;font-weight: bold">最新寻物信息</span>
        <el-tag type="primary">{{ foundItemPage.total }}条结果</el-tag>
        <div class="pad">
          <lost-found-card v-for="item in foundItemPage.list" :key="item.lostItemId" type="found"
                           :lostFoundItem="item" @detail="goLostFoundDetail('found', item)"></lost-found-card>
        </div>
        <div>
          <el-pagination
              background
              layout="prev, pager, next"
              v-model:current-page="foundItemQuery.pageNum"
              :total="foundItemPage.total"
              :page-size="10"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref, watch, watchEffect} from "vue";
import {useRouter,useRoute} from "vue-router";
import {useUserStore} from "@/stores/user";
import {Search} from '@element-plus/icons-vue'
import {
  reqGetFoundItemPage,
  reqGetLostFoundCategoryList,
  reqGetLostItemById,
  reqGetLostItemPage
} from "@/api/serve/lost/index.js";
import type {LostItems, FoundItems, LostFoundCategory} from "@/api/serve/lost/type";
import LostFoundCard from '@/components/card/LostFoundCard.vue'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
let activeName = ref('lost')
let lostItemPage = reactive({
  total: 0,
  pageNum: 1,
  list: [] as LostItems[]
})
let foundItemQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  keyword: '',
  categoryId:Number(route.query.categoryId),
  location: '',
  foundTime: null
})
let foundItemPage = reactive({
  total: 0,
  pageNum: 1,
  list: [] as FoundItems[]
})

let lostFoundCategory = ref([] as LostFoundCategory[])
let lostItemQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  keyword: '',
  categoryId: Number(route.query.categoryId),
  lostTime: null,
  location: ''
})

let goLostFoundDetail=(type:string,item)=>{
  router.push({
    name: 'lost-found-detail',
    query: {
      type:type,
      itemId: item.lostItemId || item.foundItemId
    }
  })
}
const getLostItemPage = async () => {
  let res = await reqGetLostItemPage(lostItemQuery)
  Object.assign(lostItemPage, res.data)
}
const getFoundItemPage = async () => {
  let res = await reqGetFoundItemPage(foundItemQuery)
  Object.assign(foundItemPage, res.data)
}
let getLostFoundCategoryList = () => {
  reqGetLostFoundCategoryList().then((res) => {
    lostFoundCategory.value = res.data
  })
}
let goLostCreate = () => {
  router.push('/serve/lost-found/lost-create')
}
let goDetail = (lostItemId: string | number) => {
  router.push({
    path: '/serve/lost-found/lost-detail',
    query: {
      lostItemId: lostItemId
    }
  })
}
onMounted(() => {
  getLostFoundCategoryList()
})
// 替换 watchEffect 为以下代码：
watch(activeName, () => {
  if (activeName.value === 'lost') {
    getLostItemPage();
  } else {
    getFoundItemPage();
  }
}, {immediate: true}); //使组件加载时立即执行一次
watch(() => foundItemQuery.pageNum, () => {
  getFoundItemPage()
})
watch(() => lostItemQuery.pageNum, () => {
  getLostItemPage()
})
</script>

<style scoped>
.lost-head {
  height: 70px;
  padding-top: 18px;
  display: flex;
  justify-content: center;
}
</style>
